import React from 'react';
import {NavBar} from 'antd-mobile';
import CustomTabs from '../components/faxian/CustomTabs';
import {NvZhuangList} from "../components/faxian/NvZhuangList";
import {ZhongHeList} from "../components/faxian/ZhongHeList";
import {TianMaoList} from "../components/faxian/TianMaoList";

const tabs = [
  {title: '精选', component: ZhongHeList},
  {title: '女装', component: NvZhuangList},
  {title: '家具卷装', component: TianMaoList},
];

export class RXPage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      bannerWidth: 0
    }
  }

  componentDidMount() {
    const width = document.documentElement.clientWidth;
    this.setState({
      bannerWidth: width
    });
  }

  render() {
    const {bannerWidth} = this.state;
    const {location, history} = this.props;
    console.log(this.props);
    return (
      <div>
        <div className={"tab-header"}>
          <NavBar
            mode="light"
            icon={<img src={require('../assets/jrsx/back.svg')} width={22} height={22} alt=""/>}
            onLeftClick={() => {
              let from = '';
              if (!location.state) {
                from = '/index/faxian';
              } else {
                from = location.state.from;
              }
              history.push(from);
            }}
          >热销榜</NavBar>
        </div>
        <div style={{width: '100%', height: 45}}></div>
        <img
          src={require(`../assets/rx/rx.png`)}
          alt=""
          style={{width: bannerWidth}}
        />
        <CustomTabs tabs={tabs}></CustomTabs>
      </div>
    )
  }
}
